<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title" >登录</view>

    <!-- 手机号输入框 -->
    <view class="input-container">
      <input
        type="number"
        placeholder="请输入手机号"
        v-model="phoneNumber"
        @input="handleInputChange"
      />
    </view>

    <!-- 密码输入框 -->
    <view class="input-container">
      <input
        type="password"
        placeholder="请输入密码"
        v-model="password"
        @input="handleInputChange"
      />
    </view>

    <!-- 登录按钮 -->
    <button class="login-button" :disabled="!isValid" @click="login">登录</button>

    <!-- 访客登录 -->
    <view class="guest-login" @click="guestLogin">访客登录</view>

    <!-- 忘记密码和账号注册 -->
    <view class="bottom-links">
      <view @click="forgetPassword">忘记密码</view>
      <view @click="register">账号注册</view>
    </view>
  </view>
</template>

<script>
export default {
	mounted() {
	        // #ifdef APP-PLUS
	        plus.screen.lockOrientation('portrait');
	        // #endif
	    },
  data() {
    return {
      phoneNumber: '',
      password: '',
      isValid: false
    };
  },
  methods: {
    // 处理输入框内容变化
    handleInputChange() {
      this.isValid = this.phoneNumber.length === 11 && this.password.length >= 6;
    },
    // 登录方法
    login() {
      // 这里可以添加登录逻辑，例如调用接口进行验证
      console.log('手机号：', this.phoneNumber, '密码：', this.password);
    },
    // 访客登录方法
    guestLogin() {
      console.log('访客登录');
      // 这里可以添加访客登录的逻辑

	  
uni.switchTab({
	  	url:'/pages/reapp/learnCenter/learnCenter'
	  });
    },
    // 忘记密码方法
    forgetPassword() {
      console.log('忘记密码');
      // 这里可以添加跳转到忘记密码页面的逻辑
    },
    // 账号注册方法
    register() {
      console.log('账号注册');
      // 这里可以添加跳转到注册页面的逻辑
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 30%;
}

.input-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
}

.input-container input {
  font-size: 16px;
}

.login-button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 15px;
}

.login-button:disabled {
  background-color: #ccc;
}

.guest-login {
  text-align: center;
  color: #007aff;
  font-size: 14px;
  margin-bottom: 20px;
}

.bottom-links {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.bottom-links view {
  color: #007aff;
}
</style>